<template>
  <div class="flexPage">
    <div class="btnBox">
      <template v-for="(item,idx) in btnList">
        <div :key="idx" class="btnItme" :class="{bg:isActive==idx}" @click="handleClick(idx)">
          {{item.name}}
        </div>
      </template>
    </div>

    <div class="screenBox">
      <div class="screen">
        <div id="page" class="visible-md">
          <div class="pageItem">
            <button class="btn btn-primary">测试按钮</button>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "flexPage",
  components: {},
  props: {},
  data () {
    return {
      isActive:0,
      btnList: [
        {name:'超小屏幕(手机)-宽度小于768px',tips:'手机-小于768px'},
        {name:'小屏幕(平板)-宽度大于等于768px',tips:'平板-大于等于768px'},
        {name:'中等屏幕(桌面)-宽度大于等于992px',tips:'桌面显示器-大于等于992px'},
        {name:'大屏幕(大桌面)-宽度大于等于1200px',tips:'大桌面显示器-大于等于1200px'},
      ],
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    handleClick(idx){
      this.isActive = idx;
      let dom = document.getElementById('page');
      if(idx==0){
        dom.className = 'visible-xs';
      } else if(idx==1){
        dom.className = 'visible-sm';
      } else if(idx==2){
        dom.className = 'visible-md';
      } else if(idx==3){
        dom.className = 'visible-lg';
      }
      
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.flexPage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .btnBox{
    display: flex;
    align-items: center;
    padding: 15px;
    .btnItme{
      color: #1890ff;
      padding: 5px 8px;
      border: 1px solid #91d5ff;
      background-color: #fff;
      margin: 0 5px;
      border-radius: 4px;
    }
    .bg{
      background: #e6f7ff;
    }
  }
  .screenBox{
    width: 100%;
    height: calc(100% - 90px);
    .screen{
      border: 1px dashed #cdcccd;
      width: calc(100% - 30px);
      height: 100%;
      margin: 15px;
    }
  }
  .pageItem{
    padding: 10px;
  }
}
</style>